<template>
  <a-drawer
    title="工艺单详情"
    width="90%"
    :footer="null"
    class="small"
    :visible="visible"
    @close="close"
  >
    <a-tabs v-if="multiple">
      <template v-for="(item, index) in listCpSkcPos" :key="index">
        <a-tab-pane :tab="item.title">
          <SuitWorkSheet
            :type="type"
            v-bind="$attrs"
            :listCpSkcPo="item"
            :supplierId="supplierId"
          ></SuitWorkSheet>
        </a-tab-pane>
      </template>
    </a-tabs>
    <SuitWorkSheet
      :type="type"
      v-bind="$attrs"
      :listCpSkcPo="listCpSkcPos"
      :supplierId="supplierId"
      v-else
    ></SuitWorkSheet>
  </a-drawer>
</template>

<script>
import { computed, reactive, toRefs } from 'vue'
import SuitWorkSheet from './suitWorkSheet.vue'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  components: {
    SuitWorkSheet
  },
  setup(props, { emit, attrs }) {
    console.log(attrs.data, 'attrs data')
    // type 来源 1 订单列表-大货工艺单  2 报价列表-工艺单 3-外发打样-工艺单
    const { multiple, isSwimSuit, type, supplierId } = attrs.data

    const listCpSkcPos = computed(() => {
      if (multiple) {
        return attrs.data.listCpSkcPos
      }
      if (attrs.data.listCpSkcPo?.length && isSwimSuit > -1) {
        attrs.data.listCpSkcPo[0].isSwimSuit = isSwimSuit
      }

      return attrs.data.listCpSkcPo[0]
    })

    const state = reactive({
      type,
      multiple,
      supplierId
    })

    const close = () => {
      emit('update:visible', false)
    }

    return {
      ...toRefs(state),
      listCpSkcPos,
      close
    }
  }
}
</script>

<style lang="scss" scoped>
.step2 h3 {
  margin-bottom: 10px;
}
.img-list :deep,
.rule-img :deep {
  .ant-image {
    margin-right: 10px;
    cursor: pointer;
    &:last-child {
      margin-right: 0;
    }
  }
  .ant-image-img {
    padding: 5px;
    border: 1px dashed #999;
  }
}
.rule-table {
  flex: 1;
  margin-left: 20px;
}
</style>
